<template>
  <div class="grid-container">
    <div class="item item1">
      <div id="main" style="width: 100%; height: 400px;" ></div>
    </div>
    <div class="item item2">
<!--      <h1>历史工资记录</h1>-->
        <div v-for="wage in actuallyWageList" v-if="actuallyWageList.length>0">
          <el-descriptions :column="2" border  >
            <el-descriptions-item label="基本工资">{{ wage.basicWage }}</el-descriptions-item>
            <el-descriptions-item label="奖金">{{ wage.rewardMoney}}</el-descriptions-item>
            <el-descriptions-item label="罚金">{{ wage.punishmentMoney }}</el-descriptions-item>
            <el-descriptions-item label="总补贴">{{ wage.allowance }}</el-descriptions-item>
            <el-descriptions-item label="五险一金">{{ wage.insurance}}</el-descriptions-item>
            <el-descriptions-item label="实际工资">{{ wage.wageSum }}</el-descriptions-item>
            <el-descriptions-item label="发放时间">
              <el-tag size="small">{{ wage.publishTime }}</el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <div v-if="actuallyWageList.length<=0">
          <el-empty description="您入职时间尚未有一个月"></el-empty>
        </div>
    </div>
    <div class="item item3">
      <div v-if="loadList && loadList.length > 0">
        <el-table  :data="loadList" >
          <el-table-column label="日期" align="center" prop="createTime" />
          <el-table-column label="奖惩原因" align="center" prop="rpName" />
          <el-table-column label="奖惩金额" align="center" prop="money" />
        </el-table>
      </div>
      <div v-else>
        <el-descriptions :column="3" border v-if="wageDetail">
          <el-descriptions-item label="职位编号" label-class-name="my-label" content-class-name="my-content">{{ wageDetail.pNumber }}</el-descriptions-item>
          <el-descriptions-item label="职位名称">{{wageDetail.pName}}</el-descriptions-item>
          <el-descriptions-item label="基本工资">{{ wageDetail.salary }}</el-descriptions-item>
          <el-descriptions-item label="午餐补贴">{{ wageDetail.foodAdd }}</el-descriptions-item>
          <el-descriptions-item label="住房补贴">{{ wageDetail.houseAdd }}</el-descriptions-item>
          <el-descriptions-item label="交通补贴">{{ wageDetail.trafficAdd }}</el-descriptions-item>
          <el-descriptions-item label="养老金比率">{{ wageDetail.pensionRate }}</el-descriptions-item>
          <el-descriptions-item label="医疗保险比率">{{ wageDetail.medicalRate }}</el-descriptions-item>
          <el-descriptions-item label="失业保险比率">{{ wageDetail.unemployeedRate }}</el-descriptions-item>
          <el-descriptions-item label="养老金基数">{{ wageDetail.pensionFund }}</el-descriptions-item>
          <el-descriptions-item label="医疗保险基数">{{ wageDetail.medicalFund }}</el-descriptions-item>
          <el-descriptions-item label="失业保险基数">{{ wageDetail.unemployeedFund }}</el-descriptions-item>
          <el-descriptions-item label="公积金比率">{{ wageDetail.gongjiRate }}</el-descriptions-item>
          <el-descriptions-item label="公积金基数">{{ wageDetail.gongjiFund }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
  </div>
</template>

<script>
import { getMyWage } from "@/api/checkingin/rprecord";
import { listbyMe } from "@/api/checkingin/actuallyWage";
import * as echarts from 'echarts';
import {listStandard} from "@/api/checkingin/standard";

export default {
  name:"wage",
  data(){
    return {
      /*工资*/
      wageList:" ",

      loading : false,

      /*奖罚详情*/
      loadList:[],

      /*工资详情*/
      wageDetail:" ",

      /*实际每月工资列表*/
      actuallyWageList:[],
    }
  },
  mounted() {
    this.initChart();

  },
  created() {
    this.getMyWage()
    this.getlistbyMe()
  },
  methods: {
    /*初始化工资数据*/
    getMyWage() {
      this.loading = true;
      getMyWage().then(response => {
         this.wageList= response.data;
         this.wageDetail = response.data.wageDetial
         this.initChart();
        console.log(this.wageList)
      });
    },
    /*初始化自己每月实际工资数据*/
    getlistbyMe() {
      this.loading = true;
      listbyMe().then(response => {
        console.log("实际工资",response);
        this.actuallyWageList= response.rows;
      });
    },
    /*初始化图表*/
    initChart(){
      // 获取图表容器元素
      var chartDom = document.getElementById('main');
      // 初始化图表
      var myChart = echarts.init(chartDom);
      // 图表配置
      var option = {
        title:{
          text:"本月预期工资",
          left: "center"
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient:'vertical',
          top: '5%',
          left: '0'
        },
        series: [
          {
            name: '本月工资预计',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            padAngle: 5,
            itemStyle: {
              borderRadius: 10
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: this.wageList.fundWage, name: '预期工资' },
              { value: this.wageList.rMoney, name: '奖励' },
              { value: this.wageList.pMoney, name: '惩罚' },
            ]
          }
        ]
      };
      // 设置图表配置
      myChart.setOption(option);

      myChart.on('click', (params) => {
        if (params.data.name == "预期工资") {
          console.log('基本工资');
          this.loadList = []
          // 在这里可以将 params.data.value 发送给你的组件或其他逻辑
        }else if (params.data.name == "奖励"){
          console.log("奖励")
          this.loadList = this.wageList.rewords
        }else {
          console.log("惩罚")
          this.loadList = this.wageList.punishment
        }
      });
    },

  }
};
</script>


<style>
.grid-container {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  grid-template-rows: repeat(4,220px);
  gap: 10px;
}

.item{
  /*background-color: pink;*/
}

.item1{
  background-color: white;
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
}
.item2{
  background-color: #dcd9d9;
  grid-column-start: 4;
  grid-column-end: 5;
  grid-row-start: 1;
  grid-row-end: 4;
}

.item3{
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 3;
  grid-row-end: 4;
}

</style>
